//盒须图
<template>
  <el-card class="card">
    <div class="title">
      <span>{{ title }}</span>
    </div>
    <div id="Box" class="myChart"></div>
  </el-card>
</template>

<style scoped>
  .card {
    padding: 0;
    line-height: 20px;
    text-align: left;
    border-radius: 10px;
  }

  .title {
    text-align: left;
    font-size: 20px;
    color: #676668;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }

  .myChart {
    width: 100%;
    height: 350px;
  }
</style>

<script>
  export default {
    props: {
      title: String
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        let myChart = this.$echarts.init(document.getElementById('Box'));
        let data = this.$echarts.dataTool.prepareBoxplotData([
          [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
          [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
          [850, 740, 900, 1070, 950, 980, 980, 880, 980, 930, 650, 760, 810, 1000, 960, 960],
          [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
          [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
        ], {
          layout: 'vertical'
        });
        let option = {
          tooltip: {
            trigger: 'item',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '10%',
            right: '10%',
            bottom: '10%'
          },
          xAxis: {
            type: 'category',
            data:['Bottom','Low','Middle','High','Top'],
            // data: data.axisData,
            boundaryGap: true,
            nameGap: 30,
            splitArea: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color:'#0096fa'
              }
            },
            // axisLabel: {
            //   formatter: 'expr {value}'
            // },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color:'#0096fa'
              }
            },
            name: 'CNY/m',
            splitArea: {
              show: true
            }
          },
          series: [
            {
              name: 'boxplot',
              type: 'boxplot',
              data: data.boxData,
              // lineStyle:{
              //   color:'#000'
              // },
              tooltip: {
                formatter: function (param) {
                  return [
                    'Experiment ' + param.name + ': ',
                    'upper: ' + param.data[5],
                    'Q3: ' + param.data[4],
                    'median: ' + param.data[3],
                    'Q1: ' + param.data[2],
                    'lower: ' + param.data[1]
                  ].join('<br/>');
                }
              }
            },
            {
              name: 'outlier',
              type: 'scatter',
              data: data.outliers
            }
          ]
        };
        myChart.setOption(option);
      }
    }
  }
</script>

